<script setup lang="ts">
import { ApiSysNoticeOut } from '@/api-services';
import { SysnoticeApi } from '@/api-services/apis/sysnotice-api';
import { feature, getAPI } from '@/axios-utils';
import { queryDone } from '@/utils/api';
import { onMounted, ref } from 'vue';
import dayjs from 'dayjs';

interface Props {
  id: number | string;
}

const props = defineProps<Props>();

// 公告信息
const noticeInfo = ref<ApiSysNoticeOut>({});
// 加载状态
const loading = ref(true);
// 错误信息
const errorMsg = ref<string | null>(null);

// 获取公告信息
const getNoticeInfo = async () => {

  loading.value = true;
  errorMsg.value = null;

  try {
    const [err, res] = await feature(getAPI(SysnoticeApi).get(Number(props.id)));
    queryDone(err, () => {
      if (res?.data.data) {
        noticeInfo.value = res?.data.data;
      } else {
        errorMsg.value = '未找到公告信息';
      }
    });
  } catch (e) {
    errorMsg.value = '获取公告详情失败，请稍后重试';
    console.error('获取公告详情失败:', e);
  } finally {
    loading.value = false;
  }
};
onMounted(() => {
  if (!props.id) {
    return;
  }

  //记录用户读取过
  feature(getAPI(SysnoticeApi).userReadNotice(Number(props.id)));

  getNoticeInfo();

});
</script>

<template>
  <div class="notice-detail-container">
    <!-- 加载状态 -->
    <Spin :spinning="loading" tip="加载中..." size="large">
      <div class="content-area">
        <!-- 错误提示 -->
        <ElAlert v-if="errorMsg" type="error" :message="errorMsg" show-icon class="error-alert" />

        <!-- 公告内容 -->
        <template v-if="!loading && !errorMsg && noticeInfo.id">
          <ElCard :title="noticeInfo.title" :bordered="false">
            <template #extra>
              <ElTag :type="noticeInfo.noticeState === 0 ? 'primary' : 'success'" >
                {{ noticeInfo.noticeType === 0 ? '系统通知' : '系统公告' }}
              </ElTag>
              <span class="publish-time">
                发布时间: {{ dayjs(noticeInfo.creationTime).format('YYYY-MM-DD HH:mm') }}
              </span>
            </template>
            <div class="notice-content" v-html="noticeInfo.noticeContent"></div>
          </ElCard>
        </template>

      </div>
    </Spin>
  </div>
</template>

<style scoped lang="scss">
.notice-content {
  height: calc(100vh - 270px);
}
</style>
